<template>
  <div class="product-list-outer"
       :class="(($props.showType===0 || $props.showType===3) || !$props.showType)?'product-list-item':'product-list-item1'"
       v-loading="loading">

    <template v-if="!$props.currProductModel.model || $props.currProductModel.model.length===0">
      <span style="color: darkred">暂无信息...</span>
    </template>

    <template
      v-if="$props.currProductModel.model && $props.currProductModel.model.length>0">
      <div class="line1">
        <div class="left">
          <img style="width: 90px; height: 90px; padding: 5px;"
               class="product-list-item-image"
               :src="$props.currProductModel.image?$props.currProductModel.image:dict.NoImageURL">
        </div>
        <div class="right" :style="{
          width:(this.getWinSize().width-114)+'px'
        }">
          <div class="product-list-item-title ovd_s" v-text="$props.currProductModel.model"></div>
          <div class="product-list-item-model">
            状态:
            <el-tag effect="dark" :type="$props.currProductModel.status==1?'success':'info'"
                    v-text="$props.currProductModel.status==1?'正常':'已停用'"></el-tag>

            是否默认:
            <el-tag effect="dark" :type="$props.currProductModel.isDefault==1?'success':'info'"
                    v-text="$props.currProductModel.isDefault==1?'是':'否'"></el-tag>
          </div>
          <div class="product-list-item-price-box">
            价格:
            <span class="b red" v-text="'￥'+ToMoney($props.currProductModel.price)"></span>

            数量:
            <span class="b red" v-text="$props.currProductModel.nums"></span>
            <div class="c"></div>
          </div>
        </div>
        <div class="c"></div>
      </div>
      <div class="line2">
        <my-button
          type="primary"
          text="复制链接"
          access-action="Procut/manage"
          :click="function(){copyLink($props.currProductModel.id)}"
        ></my-button>
        <my-button
          type="primary"
          text="删除"
          access-action="Procut/manage"
          :click="function(){del($props.currProductModel.id)}"
          v-if="!($props.currProductModel.model==='常规' || $props.currProductModel.id===$props.currProduct.shopProductStockId)"
        ></my-button>
        <my-button
          type="primary"
          :click="function (){edit()}"
          text="编辑"
          access-action="Procut/manage"></my-button>
        <my-button
          type="primary"
          access-action="Product/getStockLogList"
                   text="型号日志"
                   :click="function(){$router.push('ProductModelLogList?shopProductStockId='+$props.currProductModel.id)}"></my-button>
      </div>
    </template>


  </div>
</template>

<script>
import MyButton from './MyButton'

export default {
  name: 'ProductModelListItem',
  components: {MyButton},
  props: {
    showType: Number,
    orderStatus: Number,
    currProduct: Object,
    currProductModel: Object,
    changeCallBack: Function
  },
  data: function () {
    return {
      currWidth: '100%',
      loading: false,
      showAddSuccessTip: false
    }
  },
  beforeMount () {
  },
  methods: {
    edit: function () {
      let $this = this
      $this.bus.$emit('ProductAddModelDialogCallBus', {
        shopProductId: $this.$props.currProductModel.shopProductId,
        shopProductName: $this.$props.currProductModel.shopProductName,
        shopProductImage: $this.$props.currProductModel.shopProductImage,
        specificationsData: $this.$props.currProductModel.specificationsData,
        model: $this.$props.currProductModel.model,
        price: $this.$props.currProductModel.price,
        image: $this.$props.currProductModel.image,
        nums: $this.$props.currProductModel.nums,
        id: $this.$props.currProductModel.id,
        status: $this.$props.currProductModel.status,
        isDefault: $this.$props.currProductModel.isDefault,
      }, function () {
        $this.$props.changeCallBack()
      })
    },
    // 复制商品链接
    copyLink:function () {
      this.copyClipBoard('【可可商城】'+this.$props.currProductModel.shopProductName+' '+this.$props.currProductModel.model+' '+'https//h5.yangfankj.com/#/ProductDetail?id='+this.$props.currProductModel.shopProductId+'&model='+this.$props.currProductModel.model)
    },
    del: function () {
      let $this = this
      $this.$confirm('您是否取要进行该操作?', '系统提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'Product/deleteModel', {
          id: $this.$props.currProductModel.id,
        }, function (data) {
          $this.loading = false
          $this.$props.changeCallBack()
          $this.$forceUpdate()
        }, function (msg) {
          $this.loading = false
          $this.$message.error(msg)
        })
      }).catch(() => {

      })
    },
  }
}
</script>

<style scoped>
.product-list-outer {
  height: 135px;
  width: 100%;
  margin-top: 3px;
  background: #FFFFFF
}

.product-list-outer .line1 {
  height: 100px;
  width: 100%;
  float: left
}

.product-list-outer .line1 > .left {
  float: left
}

.product-list-outer .line1 > .right {
  float: left;
  line-height: 25px;
}

.product-list-outer > .line2 {
  height: 35px;
  line-height: 25px;
  width: 100%;
  float: left;
  text-align: right;
  padding-bottom: 5px;
}

.product-list-outer > .line2 > button {
  margin-right: 5px;
  padding: 5px 5px;
}
</style>
